<template>
    <div id="box">
        <input type="text" id="comments" v-model="content"><button id="send" @click="publish">发布</button>
        <ul id="list">
            <li v-for="(item) in message">
                 {{ item }} 
                <div @click="deleted" style="cursor: pointer;" >{{ deletebtn }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const content = ref('')
let message = ref([])
const parent = ref()
const deletebtn = ref('删除')
const publish = () => {
    message.value.push(content.value)
    content.value = ''
}
// .currentTarget.parentElement
// $parent
const deleted = (deletebtn) => {
    message.value.splice(deletebtn,1)
}
</script>

<style scoped>
#box {
    height: 300px;
    width: 400px;
    border: 2px solid black;
    }

#comments {
    height: 40px;
    width: 250px;
    border: 2px solid black;
    margin: 10px;
    font-size: 30px;
    }

#send {
    height: 40px;
    width: 110px;
    }

#list {
    font-size: 20px;
    list-style-type: none;
    }


li {
    display: flex;
    justify-content: space-between;
    }

</style>